<template>
	<view>
		<!-- 优惠卷 -->
		<view class="couponsTabs" :class="{no_use_bg:status<2,use_bg:status>= 2,}">
			<view class="u-flex u-row-between ">
				<view class="u-flex-3 u-text-center colorfff u-font-weight "  style="font-size: 60rpx; line-height: 216rpx;">
					￥{{ item.money }}
				</view>
				<view class="u-flex-5 u-margin-left-20">
					<view class="u-font-weight">满{{ item.total_money }}元使用</view>
					<view class=" u-type-info u-margin-top-20">有效期至 {{$u.timeFormat(item.receive_end_time, 'yyyy年mm月dd日')}} </view>
				</view>
				<view  class="u-flex-1  " :style="{color: status<2?'#FF7D55':'#999'}">
					<block v-if="status == 0" >
						<view class="">立</view>
						<view class="">即</view>
						<view class="">领</view>
						<view class="">取</view>
					</block>
					<block v-if="status == 1">
						<view class="">待</view>
						<view class="">使</view>
						<view class="">用</view>
					</block>
					<block v-if="status == 2">
						<view class="">已</view>
						<view class="">使</view>
						<view class="">用</view>
					</block>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "couponsTabs",
		data() {
			return {

			};
		},
		props: {
			// 减额钱
			reduceMoney: {
				type: [String, Number],
				default: 10
			},
			// 满足条件钱
			fillMoney: {
				type: [Number, String],
				default: 200
			},
			// title 标题
			title: {
				type: String,
				default: '新人下单满200减10'
			},
			// 有效期
			validityDay: {
				type: String,
				default: '2021-01-01'
			},
			// 状态 0立即领取 1待使用 2已使用
			status: {
				type: Number,
				default: 2
			},
			item:{
				type:Object
			}

		},
		methods:{
			getCoupon(item){
				console.log(item)
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.couponsTabs {
		width: 100vw;
		min-height: 216rpx;
	

		.right {
			height: 100%;
			
			width: 15vw;
			height: 216rpx;
			justify-content: center;
		}
		.left {
			height: 216rpx;
			text-align: center;
			.left_1 {
				width: 33vw;
			}
			.left_2 {
				text-align: center;
			}
		}
	}

	.no_use_bg {
		background: url("/static/image/use.png") no-repeat;
		background-size: 100% 100%;
	}

	.use_bg {
		background: url("/static/image/no_use.png") no-repeat;
		background-size: 100% 100%;
	}
	.colorfff {
		color: #fff
	}
</style>
